import 'package:dropdown_button2/dropdown_button2.dart';
import 'package:flutter/material.dart';
import 'package:hixing_app/const/gaps.dart';
import 'package:hixing_app/widgets/custom_dropdown_menu/custom_dropdown_menu_model.dart';

class CustomDropdownMenu extends StatefulWidget {
  const CustomDropdownMenu(
      {super.key,
      this.initIndex = 0,
      required this.sortList,
      required this.onSelect});

  final int initIndex;
  final List<DropdownMenuModel> sortList;
  final Function(int) onSelect;

  @override
  _CustomDropdownMenuState createState() => _CustomDropdownMenuState();
}

class _CustomDropdownMenuState extends State<CustomDropdownMenu> {
  late final ThemeData _themeData = Theme.of(context);

  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return DropdownButtonHideUnderline(
      child: DropdownButton2(
          customButton: Container(
            width: 138,
            padding: const EdgeInsets.symmetric(
              horizontal: 20,
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Icon(
                  Icons.sort,
                  size: 14,
                ),
                Gaps.hGap2,
                Text(
                  widget.sortList[_index].label,
                  style: const TextStyle(
                      fontWeight: FontWeight.normal, fontSize: 14),
                ),
                Gaps.hGap5,
                // Icon(
                //   AppIconR.downIconCopy,
                //   color: _themeData.primaryColor,
                //   size: 8,
                // ),
                Gaps.hGap5,
              ],
            ),
          ),
          dropdownStyleData: DropdownStyleData(
            maxHeight: 200,
            width: 126,
            // padding: const EdgeInsets.symmetric(vertical: 6),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(4),
              color: Colors.white,
            ),
            offset: const Offset(0, -10),
          ),
          menuItemStyleData: const MenuItemStyleData(
              // padding: EdgeInsets.only(left: 16, right: 16),
              ),
          onChanged: (value) {
            _index = value!;
            setState(() {});
            widget.onSelect(value);
          },
          items: List.generate(
              widget.sortList.length,
              (index) => DropdownMenuItem(
                    value: index,
                    child: Container(
                      alignment: Alignment.center,
                      child: Text(
                        widget.sortList[index].label,
                        style: const TextStyle(
                            fontWeight: FontWeight.normal, fontSize: 14),
                      ),
                    ),
                  ))),
    );
  }
}
